import 'package:flutter/material.dart';

class MyApp10 extends StatelessWidget {
  const MyApp10({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //导航条
      appBar: AppBar(
        title: const Text(
          'Expanded',
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
        backgroundColor: Colors.pink,
        centerTitle: true,
      ),
      //主体区域
      body: Center(
        child: Container(
          //子区域
          width: MediaQuery.of(context).size.width,
          height: 120,
          color: Colors.cyan,
          child: Row(
            children: [
              Expanded(
                flex: 2,
                child: Container(
                  //
                  height: 80,
                  color: Colors.red,
                  child: Text('1111'),
                ),
              ),
              Expanded(
                flex: 8,
                child: Container(
                  //
                  height: 80,
                  color: Colors.green,
                  child: Text(
                    "2222 2222 2222 22222222 2222 2222 2222 2222 2222 2222 2222 2222 2222 88 2222 2222 2222 2222 22222222 2222 2222 2222 " +
                        "111 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 888 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 88888",
                  ),
                ),
              ),
              Expanded(
                flex: 1,
                child: Container(
                  //
                  height: 80,
                  color: Colors.pink,
                  child: Text('3333'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
